<template>
	<div>

		<card v-if="$store.state.superAdmin == 'true'" style="margin-bottom:10px">
	      	<el-select style="width:100%" v-model="museumId" @change="change" filterable>
	        	<el-option
	              	v-for="item in museumList"
	              	:key="item.id"
	              	:label="item.name"
	              	:value="item.id">
	            </el-option>
	      	</el-select>
  		</card>

  		<Card>
  			<Button type="primary" @click="add" :loading="loading1">添加商品类型</Button>
  			<Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
  		</Card>

  		<Modal title="添加商品类型" v-model="modal1" width="70">
  			<Table class="table" highlight-row :columns="columns2" :data="data3"></Table>
  			<div slot="footer"></div>
    	</Modal>

	</div>
</template>

<script>
  	export default {
    	data() {
      		return {
      			museumId: '',
      			museumList: [],
      			loading1: false,
      			loading2: false,
      			columns: [
      				{ title: "商品类型名称", key: "name", align: "center" },
      				{
			          title: "商品类型图标",
			          key: "mainPic",
			          align: "center",
			          render: (h, params) => {
			            return h("img", {
			              style: {
			                width: "50px",
			              },
			              attrs: {
			                src: params.row.ico
			              }
			            });
			          }
			        },
      				{
			          title: "操作",
			          align: "center",
			          render: (h, params) => {
			            return h("div", [
			              h(
			                "Button",
			                {
			                  props: {
			                    type: "error",
			                  },
			                  on: {
			                    click: () => {
			                      this.del(params);
			                    }
			                  }
			                },
			                "删除"
			              ),
			            ]);
			          }
			        }
      			],
      			data: [],
      			data3: [],
      			data2: [
      				{
      					name: '食品特产',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img1.png'
      				},
      				{
      					name: '数码电子',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img7.png'
      				},
      				{
      					name: '服饰箱包',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img5.png'
      				},
      				{
      					name: '家居日用',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img6.png'
      				},
      				{
      					name: '办公文具',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img2.png'
      				},
      				{
      					name: '美妆个护',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img3.png'
      				},
      				{
      					name: '古风文玩',
      					pic: 'http://static.bowu66.com/wenlv/20201215_img4.png'
      				},
      			],
      			columns2: [
      				{ title: "商品类型名称", key: "name", align: "center" },
      				{
			          title: "商品类型图标",
			          key: "pic",
			          align: "center",
			          render: (h, params) => {
			            return h("img", {
			              style: {
			                width: "50px",
			                marginTop: "5px"
			              },
			              attrs: {
			                src: params.row.pic
			              }
			            });
			          }
			        },
      				{
			          title: "操作",
			          align: "center",
			          render: (h, params) => {
			            return h("div", [
			              h(
			                "Button",
			                {
			                  props: {
			                    type: "primary",
			                    loading: this.loading2
			                  },
			                  on: {
			                    click: () => {
			                      this.choose(params);
			                    }
			                  }
			                },
			                "添加"
			              ),
			            ]);
			          }
			        }
      			],

      			modal1: false,





      		}
      	},
      	created() {
    		if (this.$store.state.superAdmin == "true") {
      			this.getMuseumList();
    		} else {
      			this.museumId = this.$store.state.museumId;
      			this.getMallCategory()
			}
  		},
      	methods:{
      		// 获取博物馆列表
		    getMuseumList() {
		      this.loading1 = true;
		      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
		        if (res.data.code == 200) {
		          this.museumList = res.data.data;
		          for (let i = 0; i < this.museumList.length; i++) {
		            if (this.museumList[i].name.length > 20) {
		              this.museumList[i].name =
		                this.museumList[i].name.slice(0, 20) + "...";
		            }
		          }
		          this.museumId = this.museumList[0].id;
		          this.getMallCategory()
		        } else {
		          this.$Message.error(res.data.msg);
		        }
		      });
		    },
		    change(){
		    	this.getMallCategory();
		    },
		    add(){
		    	this.modal1 = true
		    	let newArr = this.data2
		    	for(let i=0;i<this.data.length;i++){
		    		newArr = newArr.filter(item => item.name != this.data[i].name)
		    	}
		    	this.data3 = newArr
		    },
		    getMallCategory(){
		    	this.loading1 = true
		    	this.$http(
		        "/stage/category/getMallCategory",
		        {
		          	museumId: this.museumId,
		        },
		        "get",
		        res => {
		          	if (res.data.code == 200) {
		            	this.data = res.data.data
		          	} else {
		            	this.$Message.error(res.data.msg);
		          	}
		          	this.loading1 = false;
		        });
		    },
		    del(params){
		    	this.$Modal.confirm({
			        title: "提示",
			        content:
			          	"<p>确定要删除类型<strong> " +
			          	params.row.name +
			          	" </strong>吗？</p>",
			        onOk: () => {
			          	this.loading = true;
			          	this.$http(
			            "/stage/category/deleteMallCategory",
			            {
			            	appMuseumId: this.museumId,
			              	id: params.row.id
			            },
			            "post",
			            res => {
			              if (res.data.code == 200) {
			                this.$Message.success("删除类型成功");
			                this.getMallCategory();
			              } else {
			                this.$Message.error(res.data.msg);
			              }
			            }
			          );
			        },
			        onCancel: () => {}
			    });
		    },
		    choose(data){
		    	this.loading2 = true
	    		this.$http(
		        "/stage/category/saveMallCategory",
		        {
		        	appMuseumId: this.museumId,
					icon: data.row.pic,
					name: data.row.name
		        },
		        "post",
		        res => {
		          	if (res.data.code == 200) {
		            	this.$Message.success('新增商品类型成功');
		            	this.modal1 = false
		            	this.getMallCategory()
		          	} else {
		            	this.$Message.error(res.data.msg);
		          	}
		          	this.loading2 = false;
		        });
		    },


      	}
    }
</script>

<style scoped>

</style>